Elegante Slideshow Animate Panning

Desde que mostré Not in el experimento de dhteumeuleu no había visto ningún slider o galería que llamara mi atención hasta llegar a una entrada de buildinternet que nos muestra el maravilloso Animate Panning.

Para añadirlo en el blog debemos tener en cuenta que está creado para un espacio que no debe ser inferior a width:960px de ancho, digo esto porque si deseamos añadirlo a un espacio menor la tarea se complica ya que debemos editar el script para ajustar las medidas.

Si nuestras medidas coinciden o simplemente deseamos probar el efecto la forma de añadirlo es la siguiente.

En la página del autor podemos descargar el archivo con los scripts necesarios que son cuatro. Una ves descargados los subimos a nuestro servidor y añadimos la url de nuestros scripts en la plantilla antes de </head> de la siguiente forma:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script src='url-jquery.easing.1.3.js'/>
<script src='url-jquery.timer.js'/>
<script src='url-image-rotator.js'/>

Luego añadimos los estilos antes de ]]></b:skin>

*{margin:0; padding:0;}
#window{
clear:both;
 width:960px;
 height:350px;
 background:#000;
 overflow:hidden;
 position:relative;
 margin:10px auto 10px auto;
 }

#slideshow{
width:1920px;
height:700px;
overflow:hidden;
position:relative;
}

#slideshow li{
width:960px; 
height:350px; 
float:left; 
display:inline;
}

#content {
background:url(url-imagen-bubble.jpg) no-repeat scroll left top #131310;
color:#FFFFFF;
font-family:georgia,serif;
margin:0 auto 10px;
overflow:hidden;
padding-top:20px;
width:960px;
}

Donde dice url-imagen-bubble.jpg añadimos la imagen que descargamos junto a los scripts. A continuación editamos un gadget de HTML y en su interior añadimos:

<div id="window">
<ul id="slideshow">
<li class="box1"><img src="imagen-1" alt="Imagen1"/></li>
<li class="box2"><img src="imagen-2" alt="Imagen2"/></li>
<li class="box3"><img src="imagen-3" alt="Imagen3"/></li>
<li class="box4"><img src="imagen-4" alt="Imagen4"/></li>
</ul>
</div>

En imagen-1, 2, 3, 4 añadimos la url de las imágenes, y el alt el nombre de la imagen. Si deseamos añadir más imágenes aumentaremos las líneas según las imágenes que vamos a añadir, sin olvidar que también debemos numerar en box según el orden que corresponda con la imagen.